<template>
  <el-container>
    <el-header
      style="
          text-align: center;
          line-height: 60px;box-shadow: 0 1px 4px rgb(0 21 41 / 8%)">
      <public-header>
        <template slot="center">心得分享</template>
      </public-header>
    </el-header>

    <el-main v-loading="loadingData" element-loading-text="拼命加载中">
      <div class="content">
        <div>
          <el-input
            type="textarea"
            :rows="4"
            placeholder="一起来讨论吧！"
            maxlength="300"
            show-word-limit
            v-model="discussion.content">
          </el-input>
        </div>
        <div class="saveBtn">
          <el-button type="primary" @click="saveDiscussion">发表心得</el-button>
        </div>
        <div class="discussTitle">
          <div>心得讨论</div>
          <div>
            <span style="font-size: 150%; font-weight: 600">{{ feelingNumPid }}</span>
            条心得
          </div>
        </div>
        <div class="newDiscuss">
          <div class="leftBorder"></div>
          最新心得
        </div>
        <div style="clear: both"></div>

        <el-tree
          v-if="allDiscussions.length"
          :data="allDiscussions"
          :props="defaultProps"
          :empty-text="''"
          node-key="id"
          default-expand-all>
          <el-card class="box-card" slot-scope="{ node, data }">
            <div class="top">
              <div class="username">{{ data.userInfo.username }}</div>
              <div class="time">{{ data.updatedAt | formatDateTime }}</div>
            </div>

            <div class="center">
              {{ data.content }}
            </div>

            <div class="bottom">
              <el-button type="text" circle @click.stop="reply(data)">{{
                  activeId !== data.id ? '回复' : '取消回复'
                }}
              </el-button>
              <el-popconfirm
                title="删除后无法恢复，确定删除吗？"
                @confirm="deleteDiscussion(data)"
                @click.stop.native>
              <el-button slot="reference" type="text" style="color: #F56C6C"><i class="el-icon-delete"></i>
                </el-button>
              </el-popconfirm>
            </div>

            <div v-if="activeId === data.id">
              <div>
                <el-input
                  type="textarea"
                  :rows="4"
                  placeholder="说说你的想法"
                  maxlength="300"
                  show-word-limit
                  v-model="replyDiscussion.content"
                  @click.stop.native>
                </el-input>
              </div>
              <div class="saveBtn">
                <el-button type="primary" @click.stop="saveReplyDiscussionForum">发表回复</el-button>
              </div>
            </div>
          </el-card>
        </el-tree>

        <el-pagination
          v-if="feelingNumPid"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageDto.page"
          :page-sizes="[10, 15, 30, 50]"
          :page-size="pageDto.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="feelingNumPid">
        </el-pagination>
        <el-empty v-else description="快来抢先发表你的看法吧"></el-empty>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import {getRequest, postRequest} from '../../tools/api'
import {mymessage} from '../../tools/mymessage'
import PublicHeader from '../../components/PublicHeader'

export default {
  name: 'LearnedForum',
  components: {PublicHeader},
  data () {
    return {
      defaultProps: {
        children: 'childList',
        label (data) {
          return data.userInfo.username
        }
      },
      loadingData: true,
      discussion: {
        content: '',
        literatureId: null,
        parentId: 0,
        type: 0,
        userId: null
      },
      replyDiscussion: {
        content: '',
        literatureId: null,
        parentId: 0,
        type: 0,
        userId: null
      },
      queryDiscussionDto: {
        literatureId: null,
        parentId: 0,
        type: 0
      },
      pageDto: {
        page: 1,
        pageSize: 10
      },
      allDiscussions: [],
      feelingNumPid: 0,
      activeId: -1
    }
  },
  mounted () {
    this.discussion.literatureId = Number(this.$route.query.id)
    this.discussion.userId = this.$store.getters.userInfo.id
    console.log('this.discussion', this.discussion)
    this.queryDiscussionDto.literatureId = Number(this.$route.query.id)

    this.initData()
  },
  methods: {
    initData () {
      Promise.all([this.queryDiscussionForumNum(), this.queryDiscussion()]).then(resp => {
        console.log(resp)
      })
    },
    queryDiscussionForumNum () {
      return new Promise((resolve, reject) => {
        getRequest('/discussion/queryDiscussCount/' + this.queryDiscussionDto.literatureId).then(res => {
          console.log(res)
          if (res.code === 200) {
            this.feelingNumPid = res.data.feelingNumPid

            resolve(res.message)
          } else {
            reject(res.message)
          }
        })
      })
    },
    queryDiscussion () {
      return new Promise((resolve, reject) => {
        postRequest('/discussion/query', Object.assign(this.queryDiscussionDto, this.pageDto)).then(res => {
          if (res.code === 200) {
            this.allDiscussions.length = 0
            this.allDiscussions = res.data
            console.log('this.allDiscussions', this.allDiscussions)

            this.loadingData = false
            resolve(res.message)
          } else {
            reject(res.message)
          }
        })
      })
    },
    saveDiscussion () {
      if (this.discussion.content.length === 0) {
        mymessage.warning('请输入心得内容')
      } else {
        postRequest('/discussion/insert', this.discussion).then(res => {
          console.log(res)

          if (res.code === 200) {
            mymessage.success('发表心得成功')
            this.discussion.content = ''

            this.initData()
          }
        })
      }
    },
    deleteDiscussion (discuss) {
      if (discuss.userInfo.id !== this.$store.getters.userInfo.id) {
        mymessage.warning('无法删除他人发表的心得')
      } else {
        getRequest('/discussion/delete/' + discuss.id + '/' + this.discussion.userId).then(res => {
          if (res.code === 200) {
            mymessage.success('删除心得成功')

            this.initData()
          }
        })
      }
    },
    reply (discuss) {
      this.replyDiscussion.content = ''
      this.replyDiscussion.literatureId = Number(this.$route.query.id)
      this.replyDiscussion.userId = this.$store.getters.userInfo.id
      this.replyDiscussion.parentId = discuss.id
      console.log('this.replyDiscussion', this.replyDiscussion)
      console.log(discuss)

      this.activeId = this.activeId === discuss.id ? -1 : discuss.id
    },
    saveReplyDiscussionForum () {
      if (this.replyDiscussion.content.length === 0) {
        mymessage.warning('请输入回复内容')
      } else {
        postRequest('/discussion/insert', this.replyDiscussion).then(res => {
          console.log(res)

          if (res.code === 200) {
            mymessage.success('回复成功')
            this.replyDiscussion.content = ''
            this.activeId = -1

            this.queryDiscussion()
          }
        })
      }
    },
    handleSizeChange (val) {
      this.pageDto.pageSize = val

      this.queryDiscussion()
    },
    handleCurrentChange (val) {
      this.pageDto.page = val

      this.queryDiscussion()
    }
  }
}
</script>

<style scoped>

.content {
  width: 60%;
  margin: 0 auto;
}

.saveBtn {
  margin: 10px 25px 10px 0;
  text-align: right;
}

.discussTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #409EFF;
  border-bottom: solid 2px #409EFF;
}

.newDiscuss {
  float: left;
  margin: 20px 0;
  font-size: 16px;
  color: #409EFF;
}

.leftBorder {
  float: left;
  width: 5px;
  height: 20px;
  margin: 2px 10px 0 0;
  background-color: #409EFF;
  border-radius: 2px;
}

.box-card {
  width: 100%;
  margin-bottom: 20px;
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.username {
  font-size: 16px;
  color: #409EFF;
  font-weight: 500;
}

.time {
  color: darkgrey
}

.center {
  padding: 10px 0;
  text-align: left;
}

.bottom {
  text-align: right;
}

/deep/ .el-tree-node__content {
  height: 100%;
  cursor: default;
}
</style>
